<template>      
    <div class="person">
       <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
       <br>
       <h2>游戏列表：</h2>
       <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
       </ul>
       <button @click="changeFirstGame">修改第一个游戏的名字</button>
    </div>
    
</template>

<script lang="ts"  setup >
    import { ref } from 'vue';

    let car = ref({brand:'奔驰',price:100})
    let games =ref([
        {id:'askdshvk01',name:'01'},
        {id:'askdshvk02',name:'02'},
        {id:'askdshvk03',name:'03'}
    ])

    function changePrice (){
      car.value.price+=10
      console.log(car.value.price)
    }
    
    function changeFirstGame(){
        games.value[0].name='02'
        console.log(games.value[0].name)
    }

</script>